<template>
    <div class="searchPage">
        <Searchbar @search="handleSearch" :value="value"/>
        <div class="searchWords">
            <div class="searchWordsTitle">快捷搜索</div>
            <van-tag round color="#ccc" plain class="searchWord" @click="fastSearch('今日干部请假情况')">今日干部请假情况</van-tag>
        </div>

        <van-empty v-if="noData" style="font-size:16px;" description="未检索到相关人员或车辆信息"></van-empty>

        <div class="searchResultWrapper" v-if="personList && personList.length > 0">
            <ColorItem color="#FFA000" class="searchItem" :colorBorder="false" v-for="cardInfo in personList" @click="handlePersonClick(cardInfo)">
                <PersonInfoItem :value="cardInfo" link linkText="查看详情"  />
            </ColorItem>
        </div>

        <div v-if="value == '今日干部请假情况' " class="todayLeaveInfo">
            <van-dropdown-menu auto-locate>                
                <van-dropdown-item v-model="value2" :options="option2" teleport="body" @change="handleLevelChange"/>
                <van-dropdown-item v-model="value3" :options="option3" teleport="body" @change="handleTypeChange"/>
            </van-dropdown-menu>

            <van-empty v-if="leaveNoData" description="暂无请假信息"></van-empty>

            <van-pull-refresh v-model="refreshing" @refresh="onRefresh" v-if="!leaveNoData">
                    <van-list
                        class="searchResultList" 
                        v-model:loading="loading"
                        :finished="true"
                        finished-text="没有更多了"                        
                    >

                    <ColorItem :color="getColor(item)" class="searchItem" v-for="item in leaveList" >
                        <AskLeaveLog :color="getColor(item)" :item="item"/>                        
                    </ColorItem>
                    </van-list>
                </van-pull-refresh>
        </div>

        <!-- 车辆搜索结果 -->
        <div v-if="carList && carList.length > 0" class="carListResult">
            <van-pull-refresh v-model="refreshing" @refresh="onRefreshCar">
                <div class="searchSummary" v-if="asynDate">
                    数据更新日期：{{ asynDate }}
                </div>

                <van-list
                    class="carInfoList" 
                    v-model:loading="loading"
                    :finished="true"
                    finished-text="没有更多了"                                           
                >
                    <ColorItem color="#FFA000" class="searchItem" :colorBorder="false" v-for="cardInfo in carList" @click=handleClickCar(cardInfo)>
                        <CarInfoItem :value="cardInfo" link/>
                    </ColorItem>
                </van-list>
            </van-pull-refresh>   

        </div>

        <van-popup v-model:show="showDetail" closeable position="bottom" :style="{ height: '70%' }" teleport="body" round>
            <div class="carInLog">
                <div class="detailTitleCarLOg">车辆进出校记录</div>         
                <CarLogList :plate-no="plateNo"/>   
            </div>
        </van-popup>

    </div>
    <VanBackTop />
</template>

<script lang="ts" setup>
import {ref,onMounted,onActivated} from 'vue'
import Searchbar from './searchbar.vue';
import http from '@/api/request'
import type { AskLeave, CarInfo, PersonInfo } from '@/types/common';
import ColorItem from '@/components/ColorItem.vue';
import PersonInfoItem from '@/components/PersonInfoItem.vue';
import { useRoute, useRouter } from 'vue-router';
import AskLeaveLog from '@/components/AskLeaveLog.vue';
import CarInfoItem from '@/components/carInfo.vue'
import CarLogList from '../car/carLogList.vue';

const route = useRoute();
const router = useRouter();
const noData = ref(false);
const loading = ref(false);
const personList = ref<PersonInfo[]>()
const carList = ref<CarInfo[]>();
const leaveList = ref<AskLeave[]>();
const value = ref('')
const refreshing = ref(false)
const leaveNoData = ref(false)
const asynDate = ref();
const plateNo = ref('')
const showDetail = ref(false)

interface QueryAllResult {
    personList?:PersonInfo[]
    carList?:CarInfo[]
    leaveList?:AskLeave[]
}

const handleClickCar = (c:CarInfo)=>{
    //router.push('/query/car/detail?no='+c.CPH+"&id="+c.id);
    showDetail.value= true;
    if(c.CPH)plateNo.value = c.CPH
}

const onRefreshCar = ()=>{    
    handleSearch(lastKey);
}
var lastKey = ''
const value2 = ref('');
const value3 = ref('')


    const option2 = [
      { text: '所有职级', value: '' },
      { text: '校级', value: '1' },
      { text: '正职', value: '2' },
      { text: '副职', value: '3' },
    ];

    const option3 = [
      { text: '所有类型', value: '' },
      { text: '学术交流', value: '1' },
      { text: '工作会议', value: '2' },
      { text: '上级工作任务', value: '3' },
      { text: '学术会议', value: '4' },
      { text: '合作研究', value: '5' },
      { text: '长期任教', value: '6' },
      { text: '短期讲学', value: '7' },
      { text: '培训学习', value: '8' },
      { text: '进修访学', value: '9' },
      { text: '攻读学位', value: '10' },
      { text: '旅游', value: '11' },
      { text: '探亲', value: '12' },
      { text: '其他', value: '13' },
    ];

const handlePersonClick = (person:PersonInfo)=>{
    router.push('/query/person/personAllInfoDetail?id='+person.STAFF_ID);
}

const fastSearch = (words:string)=>{
    value.value = words;
    handleSearch(words);
}

const onRefresh = ()=>{
    fastSearch('今日干部请假情况');
}

const handleTypeChange = ()=>{    
    fastSearch('今日干部请假情况');
}
const handleLevelChange = ()=>{
    fastSearch('今日干部请假情况');
}


const handleSearch = (key:string)=>{
    lastKey = key;
    loading.value = true;
    value.value = key;

    http.get<QueryAllResult>('/query/queryAll',{
        key,postLevel:value2.value,taskType:value3.value
    }).then((resp)=>{
        noData.value = true;
        loading.value = false;
        refreshing.value = false;

        carList.value = [];
        personList.value = [];
        leaveList.value = [];

        var data = resp.data;
        if(data?.carList && data?.carList.length > 0){
            noData.value = false;
            carList.value = data?.carList
        }

        if(data?.leaveList){
            noData.value = false;
            leaveNoData.value = false;
            leaveList.value = data?.leaveList

            if(data?.leaveList.length == 0){
                leaveNoData.value = true;
            }
        }

        if(data?.personList){
            noData.value = false;
            personList.value = data?.personList;
        }

    })
}


const getColor = (item:AskLeave)=>{
    
    if(item.post_level == '1')return 'red'
    if(item.post_level == '2')return '#1976D2'
    if(item.post_level == '3')return '#3390ff'
    return '#3390ff'
}

onMounted(()=>{
    initParams();
})
onActivated(()=>{
    initParams();
})
const initParams = ()=>{
    const code = route.query.code
    if(code){
        value.value = code+'';
        handleSearch(code+'')
    }
}

</script>
<style lang="less" scoped>
.searchPage{
     
    .searchWords{        
        padding:10px;

        .searchWordsTitle{
            color: #999;
            margin-bottom: 10px;
            margin-top: 4px;
        }

        .searchWord{
            font-size: 16px;
            padding: 10px;
            color: #505050 !important;
            background: transparent;
        }
    }

    .searchResultWrapper{
        padding:10px;

        .searchItem{
            background-color: #fff;
            margin-bottom: 10px;
        }
    }

    .todayLeaveInfo{
        .searchItem{
            background-color: #fff;
            margin:10px;
        }
    }

    
    .carListResult{
        .searchItem{
            background-color: #fff;
                margin:10px;
        }
    }

   
}
.carInLog{
    background-color: #f2f2f2;
    min-height: 200px;
    .detailTitleCarLOg{
        text-align: center;
        line-height: 40px;
        font-size: 18px;
        margin-top: 10px;
    }
}



</style>